<template>
  <div>
    <div class="common-layout">
      <el-container>
        <el-aside
          class="a"
          style="width: 1.4rem; height: 100vh; background-color: rgb(255, 238, 210)"
        >
          <div style="width: 1.4rem; background-color: rgb(255, 238, 210)">
            <img
              style="width: 100%"
              src="https://gd-hbimg.huaban.com/eb694f23ef397045edf722fcb2575a4651b1811b8e86e-FkamDE_fw1200webp"
              alt=""
            />
          </div>
          <el-row>
            <el-col :span="24">
              <el-menu
                active-text-color="#ff3e47"
                background-color="#FFEED2"
                style="width: 1.4rem; background-color: rgb(255, 238, 210)"
                default-active="2"
                class="el-menu-vertical-demo"
                router
              >
                <div v-for="item in router_list" :key="item._id">
                  <el-sub-menu v-show="item.children" :index="item.permissions_url">
                    <template #title>
                      <h2 style="margin-left: 0.15rem">
                        {{ item.permissions_name }}
                      </h2>
                    </template>
                    <div
                      v-for="item2 in item.children"
                      :key="item2._id"
                      style="margin-left: 0.2rem"
                    >
                      <el-menu-item :index="item2.permissions_url">
                        <P style="font-weight: 500; font-size: 13px">{{
                          item2.permissions_name
                        }}</P>
                      </el-menu-item>
                    </div>
                  </el-sub-menu>

                  <div v-show="!item.children">
                    <el-menu-item :index="item.permissions_url">
                      <el-icon><icon-menu /></el-icon>
                      <h2>{{ item.permissions_name }}</h2>
                    </el-menu-item>
                  </div>
                </div>
              </el-menu>
            </el-col>
          </el-row>
        </el-aside>

        <el-container>
          <el-header
            style="
              position: fixed;
              display: inline-block;
              top: 0;
              width: calc(100vw-34px);
              text-align: right;
            "
          >
            <div class="header">
              <!-- 面包屑 -->
              <div style="width: 20rem; max-width: 20rem;">
                <el-breadcrumb separator=">">
        <el-breadcrumb-item   style="line-height: 0.37rem;margin-left: 0.3rem;font-size: 20px;" :to="{ path: '/xxk/xxk_home' }">首页</el-breadcrumb-item>
        <template v-for="(item, index) in breadList">
          <el-breadcrumb-item
          style="line-height: 0.37rem;font-size: 20px;"
            v-if="item.name"
            :key="index"
            :to="item.path"
          >{{ item.meta.title }}</el-breadcrumb-item>
        </template>
      </el-breadcrumb>




              </div>

              <div class="header-right">
                <div style="width: 0.3rem; display: inline-block">
                  <el-col :span="10">
                    <el-dropdown trigger="click">
                      <el-avatar class="el-dropdown-link" style="margin-top: 20%" :src="avatar" />
                      <template #dropdown>
                        <el-dropdown-menu>
                          <el-dropdown-item :icon="Plus">实名认证</el-dropdown-item>
                          <el-dropdown-item :icon="CirclePlusFilled"> 详细信息 </el-dropdown-item>
                          <el-dropdown-item :icon="CirclePlus">身份认证</el-dropdown-item>
                          <el-dropdown-item :icon="Check">个人信息</el-dropdown-item>
                          <el-dropdown-item :icon="CircleCheck" @click="open"
                            >退出登录</el-dropdown-item
                          >
                        </el-dropdown-menu>
                      </template>
                    </el-dropdown>
                  </el-col>
                </div>
                <div style="margin-right: 3%">
                  <!-- <span style="font-size: 20px; font-weight: 700">姓名:</span> -->
                  <span style="font-family: 'Courier New', Courier, monospace">{{
                    authentic_name
                  }}</span>
                </div>
                <div style="margin-right: 8%">
                  <span style="font-size: 12px; font-weight: 500">职务:</span>
                  <span style="font-family: 'Courier New', Courier, monospace">{{ identity }}</span>
                </div>
              </div>
            </div>
          </el-header>
          <el-main>
            <div
              class="box"
              style="
                width: 100%;
                box-sizing: border-box;
                height: 89vh;
                overflow: auto;
                /* background-color: rgb(255, 255, 255); */
                margin-top: 0.3rem;
              "
            >
              <transition name="el-fade-in-linear">
                <router-view></router-view>
              </transition>
            </div>
          </el-main>
        </el-container>
      </el-container>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ArrowRight } from '@element-plus/icons-vue'
import { geta, posta, getPermissions } from '@/request/api/api.ts'
import type { TabsInstance } from 'element-plus'
import { ref, reactive, onMounted, h, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import {
  ArrowDown,
  Check,
  CircleCheck,
  CirclePlus,
  CirclePlusFilled,
  Plus
} from '@element-plus/icons-vue'
import { log } from 'console'
//登录人员信息
// const user=ref(JSON.parse(sessionStorage.getItem('identity')))
const router = useRouter()
const route = useRoute()

let breadList = ref()
let router_list = ref([])
const authentic_name = ref('')
const identity = ref('')
const avatar = ref('')
// 获取路由列表
const getuserdata = async () => {
  let data: any = await getPermissions({})
  router_list.value = data.info_list
}


// 面包屑


let getMatched=()=>{
  console.log(route.matched);
  breadList.value = route.matched.filter(item => item.meta && item.meta.title);
  console.log('breadList', breadList.value)
}
onMounted(()=>{
  getMatched();
})

watch(() => route.path, (newValue, oldValue) => { //监听路由路径是否发生变化，之后更改面包屑
  breadList.value = route.matched.filter(item => item.meta && item.meta.title);
})


onMounted(() => {
  
  getuserdata()
  authentic_name.value = JSON.parse(sessionStorage.getItem('authentic_name'))
  identity.value = JSON.parse(sessionStorage.getItem('identity'))
  avatar.value = JSON.parse(sessionStorage.getItem('avatar'))
})

const open = () => {
  ElMessageBox({
    title: '提示',
    message: h('p', null, [h('span', null, '您确认要退出登录吗 ？')]),
    showCancelButton: true,
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    beforeClose: (action, instance, done) => {
      if (action === 'confirm') {
        sessionStorage.clear()
        localStorage.clear()
        router.push('/')
        done()
      } else {
        done()
      }
    }
  })
}
</script>

<style lang="scss" scoped>
.header {
  line-height: 0.37rem;
  width: calc(100vw - 1.6rem);
  display: flex;
  justify-content: space-between;
}
.header-right {
  line-height: 0.37rem;
  width: calc(100vw - 1.6rem);
  display: flex;
  justify-content: right;
}

//布局容器的样式
.el-aside {
  // background-color: white;
  color: #333;
  text-align: center;
  // line-height: 200px;
  height: 50%;
}

.el-main {
  background-color: rgb(255, 255, 255);
  color: #333333;
  // text-align: center;
  // line-height: 160px;
  height: 500%;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
}

.a::-webkit-scrollbar {
  display: none;
}
.box::-webkit-scrollbar {
  display: none;
}
.common-layout {
  width: 100vw;
}
.block-col-2 .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}

.block-col-2 .el-dropdown-link {
  display: flex;
  align-items: center;
}
</style>
